<%- include('header', { tabCls: 'repos' }); %>
<ul class="list repos">
  <% repos.forEach(function(repo, idx){ %>
  <li>
    <div class="avatar">
      <a href="<%=repo.html_url%>" target="_blank">
        <img src="<%=repo.owner.avatar_url%>&s=60" loading="lazy" title="<%=repo.full_name%>" alt="<%=repo.full_name%>" />
      </a>
    </div>
    <div class="info">
      <div class="rank">
        <span title="Ranking <%=idx + 1%>"><%=idx + 1%></span>
        <a href="<%=repo.html_url%>" target="_blank" title="<%=repo.full_name%>"><%=repo.full_name%></a>
      </div>
      <div class="sub-title followers">
        <% if(repo.language) {%>
        <a class="language" target="_blank" href="https://github.com/topics/<%=repo.language.toLowerCase()%>"  title="Programming Language <%=repo.language%>">
          <%=repo.language%>
        </a>
        <% } %>
        <span class="star" title="Stargazers Count">
          <svg aria-label="star" viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img">
            <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
          </svg>
          <span><%=repo.stargazers_count%></span>
        </span>
      </div>
      <div class="details">
        <%=repo.description%>
      </div>
    </div>
  </li>
  <% }); %>
</ul>
<%- include('footer', { }); %>